<!--
 * @Descripttion: 核酸宝项目前端
 * @version: 
 * @Author: 杜宇轩
 * @Date: 2022-05-22 05:23:33
 * @LastEditors: 杜宇轩
 * @LastEditTime: 2022-05-22 06:20:33
-->
<template>
  <div class="sideBar">
    <div
      :class="{ mask: !$store.getters['getCollapse'] }"
      @click="$store.commit('setCollapse', true)"
    ></div>
    <el-menu
      class="el-menu-vertical"
      active-text-color="#303133"
      :collapse="$store.getters['getCollapse']"
      :default-active="$route.path"
      @select="select"
      router
    >
      <el-menu-item v-if="userType !== 'DOCTOR'" index="/"> 用户主页 </el-menu-item>
      <el-menu-item v-if="userType === 'VOLUNTEER'" index="/volunteer"> 志愿者主页 </el-menu-item>
      <el-menu-item v-if="userType === 'APPROVAL'" index="/approver"> 审批员主页 </el-menu-item>
      <el-menu-item v-if="userType === 'DOCTOR'" index="/doctor"> 医护人员主页 </el-menu-item>
      <el-menu-item v-if="userType === 'MANAGER'" index="/admin"> 管理员主页 </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  data() {
    return {
      isCollapse: {
        type: Boolean,
        default: false
      },
      userType: ''
    }
  },
  created() {
    this.userType = this.$store.getters['commonUser/getType'];
  },
  methods: {
    select(e) {
      this.$store.commit('setCollapse', true);
    }
  }
}
</script>

<style lang="scss" scoped>
.mask {
  background-color: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100% - 60px);
  width: 100%;
  z-index: 100;
}

.el-menu-vertical {
  background: #F5F5F5;
  position: fixed;
  top: 60px;
  left: 0;
  height: calc(100% - 60px);
  z-index: 1000;
  overflow: hidden;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 260px;
}

.el-menu--collapse {
  width: 0px;
}

.el-menu {
  border-right: 0px;
}

.el-menu:not(.el-menu--collapse) {
  border-right: solid 1px #e6e6e6;
}

.el-menu-item {
  font-size: 16px;
  text-align: left;
}

</style>
